import React, { useEffect, useState } from 'react'
import type { MenuProps } from 'antd';
import {  Menu} from 'antd';
import { useRouter } from 'next/dist/client/router';
import { routes } from './router';

const items2: MenuProps['items'] = routes
const Menus = () => {
    let router = useRouter()
    let [selectedKeys,SetselectedKeys] = useState(['/'])
    const handelClick = (key:any) =>{
        console.log(key,"key")
        sessionStorage.setItem("selectkey",JSON.stringify([key]))
        router.push(key)
    }   
    useEffect(()=>{
        let keys = sessionStorage.getItem("selectkey")
        if(keys){
            SetselectedKeys(JSON.parse(keys))
        }
    },[])



    return (
        <Menu
            mode="inline"
            selectedKeys={selectedKeys}
            defaultSelectedKeys={['/']}
            style={{ height: '100%', borderRight: 0 }}
            items={items2}
            theme="dark"
            onClick={({key})=>handelClick(key)}
        />
    )
}

export default Menus